<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 自定义组件，标题 -->
      <PageTitle :show-before="true">
        <template v-slot:before>
          <h2>实习基地管理</h2>
        </template>
      </PageTitle>
      <!-- 搜索筛选 -->
      <el-row :gutter="20" style="margin-top:20px">
        <el-col :span="4">
          <el-input v-model="query.name" type="text" placeholder="输入企业名称" />
        </el-col>
        <el-col :span="4">
          <el-select v-model.number="query.status" :placeholder="$t('table.selectThe')+'认证状态'" clearable @clear="() => { query.status=undefined } ">
            <el-option v-for="(item,index) in statusData" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select v-model.number="query.type" :placeholder="$t('table.selectThe')+'基地类型'" clearable @clear="() => { query.type=undefined } ">
            <el-option v-for="(item,index) in practiceType" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" icon="el-icon-search" @click="search">{{ $t('button.search') }}</el-button>
        </el-col>
      </el-row>
      <!-- 数据表 -->
      <el-table v-loading="downloadLoading" border :data="list" max-height="550px" style="margin-top: 20px;">
        <el-table-column label="ID" prop="id" sortable="custom" width="60" fixed />
        <el-table-column label="企业名称" prop="companyname" fixed width="240" />
        <el-table-column label="基地认证" prop="is_practice" width="140">
          <template slot-scope="{row}">
            <el-tag :type="row.is_practice|statusFilter">
              {{ row.is_practice|isPracticeType }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="基地类型" prop="practice_type" width="100">
          <template slot-scope="{row}">
            {{ row.practice_type|practiceType }}
          </template>
        </el-table-column>
        <el-table-column label="统一社会信用代码" prop="credit_code" width="180" />
        <el-table-column label="企业性质" prop="nature_name" width="100" />
        <el-table-column label="所属行业" prop="trade_name" width="140" />
        <el-table-column label="企业规模" prop="scale_name" width="100" />
        <el-table-column label="所属地区" prop="trade_name" width="140">
          <template slot-scope="{row}">{{ row.district1_name }}{{ row.district2_name }}{{ row.district_name }}</template>
        </el-table-column>
        <el-table-column label="认证时间" prop="attest_at" width="160">
          <template slot-scope="{row}">
            {{ row.attest_at|timeStanp }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.actions')" align="center" width="240" class-name="small-padding fixed-width " fixed="right">
          <template slot-scope="{row}">
            <el-button icon="el-icon-edit" type="primary" size="mini" :disabled="!checkPermission('practiceBase-show')" @click="addAdminOpen(row)">查看</el-button>
            <el-button icon="el-icon-edit" type="warning" size="mini" :disabled="!checkPermission('practiceBase-p')" @click="getBuild(row)">申报上级奖励</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" align="middle" style="margin-top:20px">
        <el-pagination background layout="total,prev,pager,next" :total="count" :page-size="query.limit" :current-page="query.page" @current-change="changPage" />
      </el-row>
    </div>
    <RightPanel ref="panel" :click-not-close="true" :width="75">
      <div class="base">
        <div class="logo"><img alt="" :src="company.logo_url"></div>
        <div class="info">
          <div class="title">
            <div class="name">{{ company.companyname }}</div>
            <!-- <div class="qcc_box">
              <a href="" target="_blank"><img src="@/assets/common/aiqicha.980bad00.png" alt=""></a>
            </div> -->
          </div>
          <div class="details">
            <el-row class="line">
              <el-col :span="8">
                <label class="line_label">企业认证：</label>
                <el-tag v-if="company.audit===0" type="info">未认证</el-tag>
                <el-tag v-if="company.audit===1" type="success">已认证</el-tag>
                <el-tag v-if="company.audit===2" type="danger">未通过</el-tag>
              </el-col>
              <el-col :span="8">
                <label class="line_label">社会信用代码：</label>
                <span class="text"> {{ company.credit_code }} </span>
              </el-col>
              <el-col :span="8">
                <label class="line_label">基地认证：</label>
                <el-tag v-if="company.is_practice===0" type="info">未认证</el-tag>
                <el-tag v-if="company.is_practice===1" type="success">已认证</el-tag>
                <el-tag v-if="company.is_practice===2" type="danger">未通过</el-tag>
                <el-tag v-if="company.is_practice===3" type="primary">审核中</el-tag>
                <el-tag v-if="company.is_practice===4" type="warning">已退出</el-tag>
              </el-col>
            </el-row>
            <el-row class="line">
              <el-col :span="8">
                <label class="line_label">基地类型：</label>
                <span class="text"> {{ company.practice_type |practiceType }} </span>
              </el-col>
              <el-col :span="8">
                <label class="line_label">企业规模：</label>
                <span class="text"> {{ company.scale_name }} </span>
              </el-col>
              <el-col :span="8">
                <label class="line_label">所属地区：</label>
                <span class="text">{{ company.district1_name }}{{ company.district2_name }}{{ company.district_name }}</span>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="tab_box">
        <el-tabs v-model="activeName">
          <el-tab-pane label="企业详情" name="1">
            <div class="clientInfo_wrapper">
              <el-row>
                <el-col :span="13">
                  <div class="tables">
                    <div class="title_t">企业资料</div>
                    <div class="table_content">
                      <el-form ref="ruleForm" :model="info" label-width="140px">
                        <el-form-item label="注册资金" prop="registered">
                          <el-input v-model="company.registered" style="width: 50%;" disabled />
                          <div style="display: inline-block;"><el-input value="万人民币" disabled style="width: 50%;" /></div>
                        </el-form-item>
                        <el-form-item label="企业性质" prop="address">
                          <el-input v-model="company.nature_name" style="width: 80%;" disabled />
                        </el-form-item>
                        <el-form-item label="所属行业" prop="address">
                          <el-input v-model="company.trade_name" style="width: 80%;" disabled />
                        </el-form-item>
                        <el-form-item label="公司网址" prop="credit_code">
                          <el-input v-model="info.website" style="width: 80%;" disabled />
                        </el-form-item>
                        <el-form-item label="企业福利" prop="tag_list">
                          <el-input v-model="listStr" style="width: 80%;" disabled />
                        </el-form-item>
                        <el-form-item label="联系地址" prop="address">
                          <el-input v-model="info.address" style="width: 80%;" disabled />
                        </el-form-item>
                        <el-form-item label="公司介绍" prop="content">
                          <el-input v-model="info.content" type="textarea" :rows="4" style="width: 80%;" disabled />
                        </el-form-item>
                      </el-form>
                    </div>
                  </div>
                </el-col>
                <el-col :span="11">
                  <div class="tables">
                    <div class="title_t">企业风采</div>
                    <div class="img_box">
                      <ImagesListUpload ref="img_list" :is-true="true" />
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
          <el-tab-pane label="联系方式" name="2">
            <div class="clientInfo_wrapper">
              <el-row>
                <el-col :span="13">
                  <div class="tables">
                    <div class="title_t">联系方式</div>
                    <div class="table_content">
                      <el-form ref="ruleForm" :model="contact" label-width="100px">
                        <el-form-item label="联系人" prop="contact">
                          <el-input v-model="contact.contact" style="width: 80%;" disabled />
                        </el-form-item>
                        <el-form-item label="联系电话" prop="mobile">
                          <el-input v-model="contact.mobile" style="width: 80%;" disabled />
                        </el-form-item>
                        <el-form-item label="联系微信" prop="weixin">
                          <el-input v-model="contact.weixin" style="width: 80%;" disabled />
                        </el-form-item>
                        <el-form-item label="联系固话" prop="telephone">
                          <el-input v-model="contact.telephone" style="width: 80%;" disabled />
                        </el-form-item>
                        <el-form-item label="联系邮箱" prop="email">
                          <el-input v-model="contact.email" style="width: 80%;" disabled />
                        </el-form-item>
                      </el-form>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
          <el-tab-pane label="基地认证信息" name="3">
            <div class="clientInfo_wrapper">
              <el-row>
                <el-col :span="13">
                  <div class="tables">
                    <div class="title_t">基地认证信息</div>
                    <div class="table_content">
                      <el-form ref="ruleForm" :model="attest_data" label-width="140px">
                        <el-form-item label="基地申请表" prop="application_form">
                          <el-row>
                            <el-col :span="18">
                              <ImageUpload ref="application_form" :is-true="isFile" />
                            </el-col>
                          </el-row>
                        </el-form-item>
                        <el-form-item label="税收完税证明" prop="tax_revenue">
                          <el-row>
                            <el-col :span="18">
                              <ImagesListUpload ref="tax_revenue" :is-true="isFile" />
                            </el-col>
                          </el-row>
                        </el-form-item>
                        <el-form-item label="生活补贴发放明细" prop="subsidy">
                          <el-row>
                            <el-col :span="18">
                              <ImagesListUpload ref="subsidy" :is-true="isFile" />
                            </el-col>
                          </el-row>
                        </el-form-item>
                        <el-form-item label="实习岗位需求" prop="requirements">
                          <el-row>
                            <el-col :span="18">
                              <ImageUpload ref="requirements" :is-true="isFile" />
                            </el-col>
                          </el-row>
                        </el-form-item>
                        <el-form-item label="带教师资信息" prop="teachers">
                          <el-row>
                            <el-col :span="18">
                              <ImageUpload ref="teachers" :is-true="isFile" />
                            </el-col>
                          </el-row>
                        </el-form-item>
                      </el-form>
                    </div>
                  </div>
                </el-col>
                <el-col :span="11">
                  <div class="tables">
                    <div class="title_t">基地认证信息</div>
                    <div class="table_content" />
                    <el-form ref="ruleForm" :model="company" label-width="140px">
                      <el-form-item label="基地类型：">
                        <el-select v-model.number="company.practice_type" :placeholder="$t('table.selectThe')+'基地类型'" style="width: 50%;">
                          <el-option v-for="(item,index) in practiceType" :key="index" :label="item.name" :value="item.id" />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="基地状态：">
                        <el-select v-model.number="company.is_practice" :placeholder="$t('table.selectThe')+'基地状态'" style="width: 50%;">
                          <el-option v-for="(item,index) in statusData" :key="index" :label="item.name" :value="item.id" />
                        </el-select>
                      </el-form-item>
                    </el-form>
                    <div class="btnOk-ljm">
                      <el-button type="primary" @click="btnUser">确定保存修改</el-button>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </RightPanel>
    <!-- 基地建设奖励 -->
    <el-dialog title="基地建设奖励" :visible="showBuild" top="60px" @close="btnCanleBuild">
      <el-form ref="ruleForm" :model="selectList" :rules="rulesS" label-width="150px">
        <div class="shopOrder-dialog">
          <el-form-item label="企业名称">
            <el-input v-model="selectList.companyname" disabled style="width:50%" />
          </el-form-item>
          <el-form-item label="基地类型">
            <el-select v-model.number="selectList.practice_type" :placeholder="$t('table.selectThe')+'基地类型'">
              <el-option v-for="(item,index) in practiceType" :key="index" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="奖励金额(元)" prop="money">
            <el-input v-model="selectList.money" placeholder="请输入奖励金额" style="width:50%" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="selectList.remarks" type="textarea" :rows="3" style="width:50%" />
          </el-form-item>
          <el-form-item label="影像件">
            <ImagesListUpload ref="imgasePhoto" />
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer">
        <el-button @click="btnCanleBuild">{{ $t('button.cancel') }}</el-button>
        <el-button type="success" @click="btnBuild">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { GetCompany, GetCompanyInfo, EditAttest, GetAttestModel, AddBaseSuperior, EditCompany } from '@/api/user'
import user from '@/store/modules/user'
export default ({
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        4: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      practiceType: [
        { id: 1, name: '区级' },
        { id: 2, name: '市级' },
        { id: 3, name: '省级' },
        { id: 4, name: '国家级' }
      ],
      statusData: [
        { id: 1, name: '已认证' },
        { id: 4, name: '已退出' }
      ],
      isFile: true,
      activeName: '1',
      list: [],
      showSettings: false,
      downloadLoading: false,
      query: {
        page: 1,
        type: undefined,
        limit: 10,
        name: '',
        status: undefined
      },
      count: 0,
      tag: [],
      preliminary: 0,
      formData: {
        id: undefined,
        mid: undefined,
        status: undefined,
        reason: ''
      },
      rules: {
        user_name: [{ required: true, message: this.$t('table.name') + this.$t('prompt.noEmpty'), trigger: 'blur' }],
        phone: [{ required: true, message: this.$t('table.tel') + this.$t('prompt.noEmpty'), trigger: 'blur' }],
        status: [{ required: true, message: this.$t('table.state') + this.$t('prompt.noEmpty'), trigger: 'blur' }]
      },
      rulesS: {
        money: [{ required: true, message: '金额不能为空！' + this.$t('prompt.noEmpty'), trigger: 'blur' }]
      },
      showDialog: false,
      info: {},
      contact: {},
      company: {},
      attest_data: {},
      listStr: '',
      fileList: [],
      img_list: [],
      modelList: [],
      multipleSelection: [],
      selectList: {},
      showBuild: false
    }
  },
  created() {
    // 获取userid
    this.formData.mid = parseFloat(user.state.userId)
    this.getUserAdmin()
  },
  methods: {
    async btnUser() {
      try {
        await this.$confirm('您确定修改认证信息吗？')
        await EditCompany(this.company)
        this.$refs.panel.show = !this.$refs.panel.show
        this.getUserAdmin()
        this.$message.success(this.$t('prompt.success'))
      } catch (error) {
        this.$message.error(this.$t('prompt.failed'))
      }
    },
    async btnBuild() {
      // 读取上传组件的数据
      const fileList = this.$refs.imgasePhoto.fileList
      // 循环判断是否已经完成全部上传
      if (fileList.some(item => !item.upload)) {
        //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
        this.$message.warning(this.$t('prompt.noImage'))
        return
      }
      const roster = []
      for (let i = 0; i < fileList.length; i++) {
        roster.push(fileList[i].url)
      }
      this.selectList.images = roster.toString(',')
      this.selectList.money = parseFloat(this.selectList.money)
      try {
        await this.$confirm('您确定提交审核吗？')
        await AddBaseSuperior(this.selectList)
        this.$router.push({ path: '/subsidy/superior' })
      } catch (error) {
        this.$message.error('失败！')
      }
    },
    // 申请建设奖励
    getBuild(row) {
      this.selectList = row
      this.selectList.money = undefined
      this.showBuild = true
    },
    selseChan(e) {
      this.attest_data.reason = e
    },
    // 获取审核模版
    async getAttestModel() {
      const one = { page: 1, limit: 100, type: 1 }
      const { list } = await GetAttestModel(one)
      this.modelList = list
    },
    // 获取管理员列表
    async getUserAdmin() {
      this.downloadLoading = true
      const { count, list } = await GetCompany(this.query)
      this.list = list
      this.count = count
      this.downloadLoading = false
    },
    // 搜索
    search() {
      this.query.page = 1
      this.getUserAdmin()
    },
    // 点击展开新增修改
    addAdminOpen(row) {
      this.getAttestationInfo(row)
      this.$refs.panel.show = !this.$refs.panel.show
    },
    // 获取审核详情
    async getAttestationInfo(row) {
      this.activeName = '1'
      this.company = {}
      this.tag = []
      this.info = {}
      this.contact = {}
      this.listStr = ''
      this.img_list = []
      this.formData.id = row.id
      this.formData.status = row.status
      this.formData.reason = row.reason
      const one = {
        bid: row.id
      }
      const { data, tag_list, info, contact, attest_data, img_list } = await GetCompanyInfo(one)
      this.company = data
      this.tag = tag_list
      this.info = info
      this.contact = contact
      this.attest_data = attest_data
      if (tag_list.length > 0) {
        this.listStr = tag_list.join(',')
      }
      this.img_list = img_list
      this.preliminary = attest_data.preliminary
      this.openDialog()
      this.getAttestModel()
    },
    // 点击确定时
    async btnOk(type) {
      try {
        const one = {
          id: this.attest_data.id,
          comid: this.attest_data.comid,
          reason: this.attest_data.reason,
          type: type
        }
        // 校验整个表单
        if (type === 1) {
          if (this.preliminary === 0) {
            return
          }
          if (this.preliminary === 2) {
            if (this.attest_data.reason === '') {
              this.$message.error('审核理由不能为空！')
              return
            }
          }
          one.mid = parseInt(user.state.userId)
          one.preliminary = this.preliminary
        } else {
          if (this.attest_data.status === 0) {
            return
          }
          if (this.attest_data.status === 2) {
            if (this.attest_data.reason === '') {
              this.$message.error('审核理由不能为空！')
              return
            }
          }
          one.fid = parseInt(user.state.userId)
          one.status = this.attest_data.status
        }
        // 调用新增接口
        await EditAttest(one)
        // 更新数据
        this.getUserAdmin()
        this.$refs.panel.show = !this.$refs.panel.show
        this.$message.success(this.$t('prompt.success'))
      } catch (error) {
        this.$message.error(error)
      }
    },
    btnCanleBuild() {
      this.selectList = []
      this.showBuild = false
    },
    // 给图片赋值
    openDialog() {
      if (this.img_list.length > 0) {
        const NewArr = []
        this.img_list.forEach(item => {
          const one = {
            url: item.url,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.img_list.fileList = NewArr
      } else {
        this.$refs.img_list.fileList = []
      }
      if (this.attest_data.application_form) {
        const imgUrl = this.attest_data.application_form.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const one = {
            url: item,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.application_form.fileList = NewArr
      } else {
        this.$refs.application_form.fileList = []
      }
      if (this.attest_data.tax_revenue) {
        const imgUrl = this.attest_data.tax_revenue.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const one = {
            url: item,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.tax_revenue.fileList = NewArr
      } else {
        this.$refs.tax_revenue.fileList = []
      }
      if (this.attest_data.subsidy) {
        const imgUrl = this.attest_data.subsidy.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const one = {
            url: item,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.subsidy.fileList = NewArr
      } else {
        this.$refs.subsidy.fileList = []
      }
      if (this.attest_data.teachers) {
        const imgUrl = this.attest_data.teachers.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const one = {
            url: item,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.teachers.fileList = NewArr
      } else {
        this.$refs.teachers.fileList = []
      }
      if (this.attest_data.requirements) {
        const imgUrl = this.attest_data.requirements.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const one = {
            url: item,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.requirements.fileList = NewArr
      } else {
        this.$refs.requirements.fileList = []
      }
    },
    // 分页
    changPage(newPage) {
      this.query.page = newPage
      this.getUserAdmin()
    }
  }
})
</script>

<style scoped lang="scss">
.table-img{
  width: 80px;
}
.shopOrder-dialog{
  height: auto;
  max-height: 600px;
  overflow-y: auto;
  .editor{
    width: 500px;
  }
}
.shopOrder-dialog::-webkit-scrollbar{display:none}
.base{
  padding: 20px 30px;
  display: flex;
  .logo{
    width: 118px;
    height: 118px;
    margin-right: 20px;
    background-color: #ebeef5;
    border: 1px solid #ebeef5;
    border-radius: 3px;
    img{
      width: 100%;
      height: 100%;
      border-radius: 3px;
    }
  }
  .info{
    flex: 1;
    .title{
      padding: 5px 0 18px;
      display: flex;
      .name{
        font-size: 20px;
        height: 20px;
        color: #303033;
        font-weight: 600;
        margin-right: 10px;
      }
      .user{
        padding-top: 6px;
        font-size: 14px;
        font-weight: 400;
        line-height: 14px;
        color: #777;
        .logoin{
          color: #0078ff;
          cursor: pointer;
        }
      }
      .qcc_box{
        width: 63px;
        height: 20px;
        position: absolute;
        right: 30px;
        z-index: 30;
        cursor: pointer;
        a{
          cursor: pointer;
          color: inherit;
          text-decoration: none;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .details{
      max-width: 100%;
      .line{
        margin-bottom: 15px;
        .line_label{
          color: #777;
          font-size: 14px;
          line-height: 14px;
          font-weight: 400;
        }
        .text{
          display: inline-block;
          font-size: 14px;
          line-height: 14px;
        }
        .text_color{
          color: #0078ff;
          cursor: pointer;
        }
      }
    }
  }
}
.bind_icon{
  display: inline-block;
  float: left;
  margin-right: 5px;
}
.tab_box{
  padding:0 30px;
}
.clientInfo_wrapper{
  height: calc(100vh - 246px);
    overflow-y: auto;
}
.tables{
  padding: 20px 0px;
}
  .title_t{
    font-weight: 700;
    font-size: 16px;
    margin-left: 20px;
  }
  .table_content{
    margin-top: 30px;
  }
  .img_box{
    margin-top: 30px;
  }
  .btnOk-ljm{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
  }
</style>
